昨天學習完了CSS基礎語法，今天來學習CSS盒模型。

CSS盒模型基礎

盒模型（box model）是CSS中的一種概念，在盒模型結構中，HTML的元素會被視為一個盒子，然後我們會再對這個盒子進行調整與修正。
CSS 盒模型（Box Model）：
• 盒模型結構：每個 HTML 元素都是一個矩形框，盒模型由四個主要部分組成：
• Content（內容）：元素的實際內容區域。
• Padding（內邊距）：內容和邊框之間的空間。
• Border（邊框）：圍繞內容和內邊距的邊框。
• Margin（外邊距）：邊框和其他元素之間的空間。

• 盒模型的 CSS 屬性：
• width, height：設置內容區域的寬度和高度。
• padding：設置內邊距，指定元素內容和邊框之間的空間。
• border：設置元素邊框的厚度、樣式和顏色。
• margin：設置外邊距，控制元素與其他元素之間的距離。

CSS佈局技術

再來是CSS的佈局技術，我們在設計網頁時常需要控制元素的排列方式，佈局技術就是用在這個地方的。
2.1 display 屬性：
• display: block;：塊級元素，這些元素佔據一整行，寬度可以調整，通常用於標籤如 < div >、< p >。這些元素會將後面的元素推到下一行。
• display: inline;：行內元素，這些元素只佔據它們內容的大小，不會打斷行排列。標籤如 < span >、< a > 通常是行內元素。
• display: inline-block;：類似行內元素，但可以設置寬度和高度。它同時具備 inline 和 block 元素的特點。

2.2 float 屬性：
• float 是 CSS 中用來控制元素左右浮動的屬性。浮動元素會從正常的文檔流中脫離，但仍然會影響其後的元素。常用於圖片、導航欄的佈局。
• float: left; 或 float: right;：將元素向左或向右浮動，讓後續的元素圍繞它排列。

2.3 clear 屬性：
當使用了 float 佈局，後面的元素可能會受到浮動元素的影響。clear 屬性用於清除浮動影響，讓後面的元素正常排列。常用 clear: both; 來清除浮動效果。

今天就先到這邊，明天繼續Flexbox佈局技術。